HTML
<!--ACU Cards-->
<div class="mainSplitContainer factionPadding">
<div class="splitContainer column3">
<div class="splitItem scrollFade animationLeft acuCard" id="acuUEF"></div>
</div>
<div class="splitContainer column9 acuAbsolute">
<div class="splitItem factionAbsolute acuAbsoluteActive">
<div class="splitImage scrollFade"><img src="../img/uef.jpg" alt=""></div>
</div>
</div>
<div class="splitContainer column3 acuCard">
<div class="splitItem">
<div class="splitImage scrollFade animationLeft"><img src="../img/acucybran.jpg" alt=""></div>
</div>
</div>
<div class="splitContainer column9 acuAbsolute">
<div class="splitItem factionAbsolute">
<div class="splitImage scrollFade"><img src="../img/cybran.jpg" alt=""></div>
</div>
</div>
<div class="splitContainer column3 acuCard">
<div class="splitItem">
<div class="splitImage scrollFade animationRigth"><img src="../img/acuaeon.jpg" alt=""></div>
</div>
</div>
<div class="splitContainer column3 acuCard">
<div class="splitItem">
<div class="splitImage scrollFade animationRigth"><img src="../img/acuseraphim.jpg" alt=""></div>
</div>
</div>
</div>
JS
let acuCard = document.getElementsByClassName("acuCard");
let factionAbsolute = document.getElementsByClassName("factionAbsolute");
for (let i = 0; i < acuCard.length; i++) {
acuCard[i].addEventListener("click", () => {
factionAbsolute[i].classList.toggle("acuAbsoluteActive");
let storeVariable = 0;
storeVariable.push(i);
So I have this function that depending on which acuCard is clicked, it toggles a class for factionAbsolute, I want to store the value of which card was used. So if the second card (1) was clicked, I want to be able to store that in a variable. This is because I want to make it have a different behavior if the same card is clicked again, like an if statement like
if i == storedVariable... (storedVariable being the last acuCard that was clicked)
how could I achieve this? I think something with push or shift but I cant make it an array or it will always have the value 0